<script lang="ts">
import { Options, Prop, Vue, Watch } from 'vue-property-decorator';
import { isNullOrWhiteSpece } from '@jctech/utils/is';
import { AreaService } from '@jctech/api/services/area';

const AreaSrc = AreaService.getInstance<AreaService>();

@Options({
  name: 'c-areashow'
})
export default class CAreaShow extends Vue {
  @Prop({ type: null, default: '' })
  declare areacode: string;

  @Prop({ type: null, default: '' })
  declare detail: string;

  @Prop({ type: String, default: '' })
  declare label: string;

  value = '';

  get HASLABEL() {
    return !isNullOrWhiteSpece(this.label);
  }

  get SPANTEXT() {
    if (this.HASLABEL) {
      return `${this.label}:${this.value}`;
    }
    return this.value;
  }

  mounted() {
    this.init();
  }

  init() {
    this.value = '';
    if (!isNullOrWhiteSpece(this.areacode)) {
      AreaSrc.getAreaFullName(this.areacode).then((res) => {
        this.value = res + this.addDetail();
      });
    } else {
      return this.addDetail();
    }
  }

  addDetail() {
    if (!isNullOrWhiteSpece(this.detail)) {
      return this.detail;
    }
    return '';
  }

  @Watch('areacode')
  OnChangeAreaCode() {
    this.init();
  }

  @Watch('detail')
  OnChangeDetail() {
    this.init();
  }
}
</script>

<template>
  <span>{{ SPANTEXT }}</span>
</template>
